<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../0_assets/vue2.js"></script>
</head>

<body>
    <div id="app">
        <h1>我是爹，下面是我的儿子</h1>
        <!-- 注意在html语句中，属性名尽量不要用驼峰式，而是对应的改成用-连接的形式 ,属性值以及js部分可以依然使用驼峰式-->
        <child :mika-child-name="mikaChildName" :mika-child-nick-name="mikaChildNickName"></child>
    </div>
    <script>
        /*
            通过props，可以在子组件中注册一些自定义的属性，以此接纳父组件传过来的数据
        */
        let app = new Vue({
            el: '#app',
            data() {
                return {
                    parentName: 'mika-parent',
                    mikaChildName: 'mika-child',
                    mikaChildNickName:'狗子'
                }
            },
            components: {
                child: {
                    template:
                     `
                    <div>
                         <li>爸爸给我的名字: {{ mikaChildName }}</li>
                         <li>爸爸给我的外号: {{ mikaChildNickName }}</li>
                    </div>
                    `,
                    // 最简单的用法，把自定义的名称以字符串的形式放到一个数组里
                    // props: ['mikaChildName'],
                    
                    // 进阶用法，可以限制类型，如果父组件传入的数据格式不匹配，窗口会有警告出现
                    props:{
                        mikaChildName:{
                            type:String,
                            default:'我爹没给我起名字',//default就是代表如果父组件没有传值给我，我这个属性就默认取这个值
                        },
                        mikaChildNickName:{
                            // 更狠的，你可以自定义规则，定义一个validator并赋值为函数即可
                            validator(value){//value就是将来父组件传进来的值
                                return value.includes('狗');//return 后面写上条件，比如这里就是要求这个属性值必须包含 狗 这个字眼
                            }
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>